<template>
	<view>
		<view class="head">
			<image style="width: 100%;" src="../../static/tab/bg.png" mode="widthFix"></image>
			<view class="search">
				<view class="dw" @click="getLocat()">
					<image src="../../static/dingwei.png" mode=""></image>
					<span>{{site}}</span>
					<image class="xiala" src="../../static/xiala.png" mode=""></image>
				</view>
				<view class="sousou">
					<u-search :searchIconSize="0" :showAction="false" @change="change" :clearabled="false" :height="36" style="width: 100%;" @search="search" shape="square-" borderColor="" placeholder="请输入你想搜索的关键词" v-model="keyword"></u-search>
					<view class="" style="margin-top: 10rpx; margin-right: 10rpx;" @click="sousou">
						<image class="searchImg" src="../../static/sousuo.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"seach",
		data() {
			return {
				keyword: '',
			};
		},
		props:{
			site:{
				type:String,
				default:'定位失败'
			},
		},
		methods:{
			change(e){
				console.log('22',e)
			},
			search(e){
				console.log('123',e)
			},
			sousou(){
				this.search()
			},
			getLocat(){//获取当前位置
				let that = this
				uni.getLocation({
						type: 'wgs84',
						geocode:true,//设置该参数为true可直接获取经纬度及城市信息
						success: function (res) {
							that.site= res.city
							console.log('当前定位',res,that.address)
						},
						fail: function () {
							console.log('定位失败了 应该怎么办')
							uni.showToast({
								title: '获取地址失败，将导致部分功能不可用',
								icon:'none'
							});
						}
					});
			}
		}
	}
</script>

<style lang="scss">
	.head{
		background-image: url('/static/tab/bg.png');
		background-size:cover;
		width: 100%;
		height: 307rpx;
		position: relative;
		
	}
	.search{
		width: 90%;
		padding: 0 5%;
		position: absolute;
		top: 120rpx;
		z-index: 99;
		
		image{
			width: 25rpx;
			height: 28rpx;
			margin: 0 10rpx;
			// margin-bottom: 40rpx;
		}
		.xiala{
			width: 18rpx;
			height: 12rpx;
		}
	}
	.sousou{
		display: flex;
		justify-content: space-between;
		background-color: #f2f2f2;
		border: 4rpx solid #1A1A1A;
		height: 73rpx;
		border-radius: 13rpx;
	}
	.searchImg{
		width: 25rpx;
		height: 25rpx;
		// margin-top: 30rpx;
	}
	.dw{
		margin-bottom: 35rpx;
	}
</style>